<template>
  <div>
		<van-nav-bar  title="房间配置" left-arrow @click-left="$utils.back($route.path)" />
		<div class="register-form mg-24 bg-white">
      <van-cell-group class="apply_main fs-32">
				<van-field
					class="fs-32"
					v-model="pageData.Name"
					clearable
					label="房间名称"
					placeholder="请输入房间名称"
				/>
				<van-field
					class="fs-32"
					v-model="pageData.RoomNo"
					clearable
					label="房间编号"
					placeholder="请输入房间编号"
				/>
				<van-field
					class="fs-32"
					v-model="pageData.DeviceType"
					clearable
					label="设备类型"
					placeholder="请输入类型"
				/>	
				<van-field
					class="fs-32"
					v-model="pageData.DeviceId"
					clearable
					label="关联设备"
					placeholder="请输入关联设备"
				/>
				<van-field
					class="fs-32"
					v-model="pageData.Remark"
					clearable
					label="备注"
					placeholder="请输入备注"
				/>	
				<div class="idtype mr-24 ptb-24">
					<div class="idtype_title">关联预定配置</div>
					<van-dropdown-menu >
						<van-dropdown-item v-model="settingId" :options="option1" @change="change1" ref="filterDropdown"/>
					</van-dropdown-menu>
					<svg-icon icon-class="right" class="fs-24 ml-10" @goPage="goOpen"/>
				</div>
				<div class="idtype mr-24 ptb-24">
					<div class="idtype_title">关联商品</div>
					<van-dropdown-menu >
						<van-dropdown-item v-model="productId" :options="option2" @change="change2" ref="filterDropdowns"/>
					</van-dropdown-menu>
					<svg-icon icon-class="right" class="fs-24 ml-10" @goPage="goOpen2"/>
				</div>
			
			</van-cell-group>
		</div>
		<div class="plr-40 ptb-24 bg-white fixed-bottom" v-if="isNew">
      <van-button  size="large" class="bg-primary color-white br-44" @click="submit">提交</van-button>
    </div>
		<div v-else class="roomBtn">
			<button @click="updateRoom" class="repair">修改</button>
			<button @click="deleteRoom" class="btn">删除</button>
		</div>
	</div>
</template>
<script>
import { GetProductBookSettingPage,ProductRoomAddOrEdit,ProductRoomDelete,GetStoreSupplierProductPage } from 'api/teaHouse'
export default {
	props: {		
	},
	data() {
    return {
			settingList: [],
			option1:[
				{text:'查看选择',value:0}
			],
			option2: [
				{text:'查看选择',value:0}
			],
			dropdownType: false,
			isNew: true, //是否新增
			requestData: {
				PageIndex: 1,
				PageSize: 30,
			},
			pageData: {
			},
			settingId: 0,
			settingName: '查看选择',
			productId: 0,
			productName: '',
			ids: '',
			param: {
				IsFutures: 7,
				SaleStatus: 1,
				Status: 2,
				PageIndex: 1,
				PageSize: 50,
			}, //获取预定配置下的商品列表传参
    }
  },
	watch: {
   
  },
	 created(){		
		this.GetProductBookSettingPage()
		console.log(this.$route.query.saleType,'类型')
		if(this.$route.query.saleType !== undefined){
			this.requestData.saleType = this.$route.query.saleType
			
		}	
		if(this.$route.query.item){
			const data = this.$route.query.item
			this.pageData = JSON.parse(JSON.stringify(data))
			this.productId = this.pageData.ProductId
			this.productName = this.pageData.ProductName
			this.settingId = this.pageData.SettingId
			this.settingName = this.pageData.SettingName
			this.isNew = false
		}
	},
	mounted(){
	},
	methods: {
		GetStoreSupplierProductPage(){
			GetStoreSupplierProductPage(this.param).then(res =>{
				if(res.Data &&  res.Data.length > 0){
					res.Data.forEach((ele)=>{
						const obj = {}
						obj.text = ele.ProductName
						obj.value = ele.ID
						this.option2.push(obj)
					})
				}
			})
		},
		GetProductBookSettingPage(){
			GetProductBookSettingPage(this.requestData).then(res => {
				if(res.Data && res.Data.Data && res.Data.Data.length > 0){
					this.settingList = res.Data.Data
					res.Data.Data.forEach((ele)=>{
						const obj = {}
						obj.text = ele.Name
						obj.value = ele.ID
						this.option1.push(obj)
					})
				}
				if(this.settingId > 0){
					this.getProduct(this.settingId)
				}
			})
		},
		ProductRoomAddOrEdit(){
			ProductRoomAddOrEdit(this.pageData).then(res =>{
				if(res.Data){
					this.$utils.back(this.$route.path)
					setTimeout(()=>{
						this.$toast('房间编辑成功')
					},500)	
				}
			})
		},	
		goProduct(){

		},
		change1(e){
			this.settingId = e
			this.option1.forEach((ele)=>{
				if(ele.value === e){
					this.settingName = ele.text
				}
			})
			this.getProduct(e)
		},
		getProduct(e){
			this.settingList.forEach((ele) =>{
				if(ele.ID === e){
					this.ids = ele.ProductIds.split('|').map(el => el.trim()).filter(item => item.trim() != '').toString()
				}
			})
			if(e !== 0){
				this.option2 = [{text:'查看选择',value:0}]
				this.param.ProductIds = this.ids
				this.GetStoreSupplierProductPage()
			}else{
				this.$toast('请选择关联配置')
			}
		},
		change2(e){
			this.productId = e
		},
		
		goOpen(){
			this.$refs.filterDropdown.toggle()
		},
		goOpen2(){
			this.$refs.filterDropdowns.toggle()
		},
		submit() {
			//if (this.pageData.userName == '') {
			//	this.$toast('请输入姓名')
			//	return
			//}
			//if (this.pageData.userIdentityCard == '') {
			//	this.$toast('请输入身份证号')
			//	return
			//} else {
			//	if (this.pageData.userIdentityCard.length < 18 || !(
			//			/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/.test(this.pageData.userIdentityCard))) {
			//		this.$toast('请输入正确身份证号')
			//		return
			//	}
			//}
			//if (this.pageData.userTel == '') {
			//	this.$toast('请输入联系电话')
			//	return
			//} else {
			//	if (this.pageData.Phone < 11 || !(/^1[23456789]\d{9}$/.test(this.pageData.userTel))) {
			//			this.$toast('请输入正确联系电话')
			//			return
			//	}
			//}
		
			if(this.productId === 0){
				this.$toast('请选择关联商品')
				return
			}else{
				this.pageData.ProductId = this.productId
			}
			this.ProductRoomAddOrEdit()
		},
		updateRoom() {
			if(this.productId === 0){
				this.$toast('请选择关联商品')
				return
			}else{
				this.pageData.ProductId = this.productId
			}
			this.ProductRoomAddOrEdit()
		},
		deleteRoom() {
			this.$dialog.confirm({
        message: '确定要删除该房间？'
      })
        .then(() => {
          this.ProductRoomDelete(this.pageData.ID)
        })
        .catch(() => {
          // on cancel
        })
		},
		ProductRoomDelete(ids){
			ProductRoomDelete(ids).then(res => {
				if(res.Msg === ''){
					this.$utils.back(this.$route.path)
					setTimeout(()=>{
						this.$toast('房间删除成功')
					},500)
				}else{
					this.$toast(res.Msg)
				}
			})
		}
  },
}
</script>
<style lang="scss" scoped>
	.remark{
		background: #f7f7f7;
		padding-left: 32px !important;
	}	
	.idtype{
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #ebedf0;
		margin-left: 10px;
	}
	.project{
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		border-bottom: 1px solid #ebedf0;
		margin-left: 20px;
	}
	.idtype_title{
		font-size: 32px;		
		position: relative;
		width: 280px;
		margin-left: 20px;
	}
	.apply_title{
		margin: 20px 0 0 5px;
		font-size: 32px;		
		position: relative;
	}
	.project:last-child{
		border-bottom: none;
	}
	[class*=van-hairline]::after {
  	border: none;
	}
	.project{
		.van-cell{
			padding-left: 0;
		}
	}
	.left-star{
		padding-left: 15px;
		&::before{
			content: "*";
			color: #FF0202;
			position: absolute;
			font-size: 28px;
			top: 5px;
			left: 0;
		}
	}
	/deep/.van-dropdown-menu__bar{
		height: 30px;
    line-height: 30px;
    background: none;
		box-shadow: none;
		text-align: right;
	}
	/deep/.van-dropdown-menu{
		width:calc(100% - 105px);
	}
	/deep/.van-dropdown-menu__title{
		width: 100%;
	}
	/deep/.van-dropdown-menu__title::after{
		border:none;
	}
	.roomBtn{
		position: fixed;
		bottom: 0;
		width: 100%;
		display: flex;
		justify-content: space-around;
		padding: 24px;
		background: #fff;
	}
	.repair{
		width: 324px;
		height: 80px;
		line-height: 80px;
		background: $primary15;
		border-radius: 44px;
		text-align: center;
		color: #fff;
		font-size: 34px;
	}
	.btn{
		width: 324px;
		height: 80px;
		line-height: 80px;
		background: #FF0202;
		border-radius: 44px;
		text-align: center;
		color: #fff;
		font-size: 34px;
	}
	/deep/.van-field__label {
		width: 140px;
		margin-right: 20px;
	}
	/deep/.van-field__control{
		text-align: right;
	}
</style>
